<script setup lang="ts">
  import { computed } from 'vue'
  import { StrUtil } from '@xtail/core'
  import { ElAside } from 'element-plus'
  import { SIconIconify } from '@xtail/vue3'
  import ChevronCompactLeft from '@iconify-icons/tabler/chevron-compact-left'
  import ChevronCompactRight from '@iconify-icons/tabler/chevron-compact-right'
  import { LayoutSideHiddenPropsType } from './types'
  import { LayoutSideHiddenPosConst } from './consts'

  defineOptions({
    name: 'XLayoutSideHidden'
  })

  const props = withDefaults(defineProps<LayoutSideHiddenPropsType>(), {
    width: '202px',
    position: LayoutSideHiddenPosConst.Right,
    border: true,
    transitionProps: {} as any,
    trigger: true,
    className: '',
    style: ''
  })

  const value = defineModel<boolean>({ default: false })

  const handleToggle = () => (value.value = !value.value)

  const classNameComputed = computed(() => {
    const borderClassName = props.border
      ? props.position === LayoutSideHiddenPosConst.Left
        ? 's-layout-side-hidden--left__side-border'
        : 's-layout-side-hidden--right__side-border'
      : ''
    if (StrUtil.isStr(props.className)) {
      return borderClassName + ' ' + props.className
    } else {
      return [borderClassName, ...props.className]
    }
  })

  const triggerIconComputed = computed(() => {
    if (props.position === LayoutSideHiddenPosConst.Left) {
      return value.value ? ChevronCompactLeft : ChevronCompactRight
    } else {
      return value.value ? ChevronCompactRight : ChevronCompactLeft
    }
  })
</script>

<template>
  <div
    class="s-layout-side-hidden"
    :class="[value ? 's-layout-side-hidden--showed' : 's-layout-side-hidden--hidden']"
  >
    <transition
      v-bind="{
        name:
          position === LayoutSideHiddenPosConst.Left
            ? 's-layout-side-hidden--left'
            : 's-layout-side-hidden--right',
        ...transitionProps
      }"
    >
      <el-aside
        v-if="value"
        class="s-layout-side-hidden__side"
        :class="classNameComputed"
        :style="style"
        :width="width"
      >
        <slot />
      </el-aside>
    </transition>
    <div
      v-if="trigger"
      class="s-layout-side-hidden__trigger"
      :class="[
        position === LayoutSideHiddenPosConst.Left
          ? 's-layout-side-hidden--left__trigger'
          : 's-layout-side-hidden--right__trigger'
      ]"
      @click="handleToggle"
    >
      <slot name="trigger">
        <div class="s-layout-side-hidden__trigger-icon">
          <slot name="trigger-icon">
            <s-icon-iconify :icon="triggerIconComputed" />
          </slot>
        </div>
      </slot>
    </div>
  </div>
</template>

<style lang="scss">
  @use './style' as *;
</style>
